let currentBanner = 0;  /* 监测现在的banner */
let banner = document.getElementsByClassName('banner-group')[0];/* 获取所有banner的内容 */
let bannerDot = document.getElementsByClassName('page-dot')[0].children[0].children;
let isAnimate = false;  /* 判断是否在动画中 */
banner.style.left = '0%';
bannerDot[currentBanner].style.width = '30px';
bannerDot[currentBanner].style.opacity = 1;
/* 循环轮播 */
let timer = setInterval(() => {
  nextBanner();
}, 5000);
/* 移动函数 */
function move(index){
  /* 暂停计时 */
  clearInterval(timer);
  if(isAnimate == false) {
    isAnimate = true;
    let distance = index - currentBanner;
    if(index - currentBanner != 0){
      let i = 1;
      bannerDot[index].style.width = '30px';
      bannerDot[index].style.opacity = 1;
      bannerDot[currentBanner].style.width = '10px';
      bannerDot[currentBanner].style.opacity = 0.5;
      /* 移动 */
      let moveTimer = setInterval(() => {
        /* 目标banner的序号比现在banner的序号小，说明整个板要向右移动 负负得正 */
        /* 目标banner的序号比现在banner的序号大，说明整个板要向左移动 负正得负 */
        /* 使用distance变量可以保证不管经过多少个banner都可以在相同的时间内完成动画 */
        banner.style.left = parseInt(banner.style.left) - 2 * distance + '%';
        if(i == 50){
          /* 异步结束 */
          clearInterval(moveTimer);
          currentBanner = index;
          isAnimate = false;
          /* 重新计时 */
          timer = setInterval(() => {
            nextBanner();
          }, 5000);
        } 
        i++;
      }, 5)
    }
  }
}
function nextBanner() {
  let index;
  if(currentBanner == banner.children.length - 1) {
    index = 0;
  }else{
    index = currentBanner + 1
  }
  move(index);
}
function lastBanner() {
  let index;
  if(currentBanner == 0) {
    index = banner.children.length - 1;
  }else{
    index = currentBanner - 1
  }
  move(index);
}